<template>
  <div class="home-container">
    <SidebarNav />
    <div class="main-content">
      <TopHeader />
      <div class="content-area">
        <div class="stats-cards">
          <div class="stat-card">
            <span class="stat-title">总项目数</span>
            <span class="stat-value">87</span>
          </div>
          <div class="stat-card">
            <span class="stat-title">任务完成数</span>
            <span class="stat-value">32</span>
          </div>
          <div class="stat-card help-card">
            <span class="stat-title">怎么使用?</span>
            <button class="help-btn">点我</button>
          </div>
        </div>

        <div class="upload-section">
          <div class="upload-header">
            <span class="toggle-icon">▼</span>
            <h3>文件上传</h3>
          </div>
          <div class="upload-content">
            <div class="recent-file">
              <span>最近</span>
              <a href="#">（定稿）鲁抗医药SS-10-2项目、SS-16项目变压器采购分析.docx</a>
              <button class="view-btn" @click="navigateTo('/bidding-library')">查看</button>
            </div>
            <div class="upload-boxes">
              <div class="upload-box">
                <input type="file" ref="singleFileInput" @change="handleSingleFileUpload" style="display: none;" accept="image/jpeg,image/png,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
                <div class="upload-box-content" @click="triggerSingleFileInput">
                  <div class="upload-icon">↑</div>
                  <p>单文件上传</p>
                </div>
                <span class="upload-hint">单文件上传（只能上传jpg/png/pdf/doc/docx文件, 且不超过500kb）</span>
              </div>
              <div class="upload-box" @click="showMultiUploadModal = true">
                <div class="upload-box-content">
                  <div class="upload-icon">↑</div>
                  <p>多文件上传</p>
                </div>
                <span class="upload-hint">多文件上传（只能上传jpg/png文件, 且不超过500kb）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <MultiUploadModal v-if="showMultiUploadModal" @close="showMultiUploadModal = false" />
    <tender-progress-assistant />
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import SidebarNav from '../components/Sidebar.vue';
import TopHeader from '../components/TopHeader.vue';
import MultiUploadModal from '../components/MultiUploadModal.vue';
import TenderProgressAssistant from '@/components/TenderProgressAssistant.vue';

export default {
  name: 'HomePage',
  components: {
    SidebarNav,
    TopHeader,
    MultiUploadModal,
    TenderProgressAssistant,
  },
  setup() {
    const router = useRouter();
    const showMultiUploadModal = ref(false);
    const singleFileInput = ref(null);
    const selectedFile = ref(null);
    
    const navigateTo = (path) => {
      router.push(path);
    };
    
    const triggerSingleFileInput = () => {
      singleFileInput.value.click();
    };
    
    const handleSingleFileUpload = (event) => {
      const file = event.target.files[0];
      if (!file) return;
      
      // 检查文件大小（500KB = 512000 bytes）
      if (file.size > 512000) {
        alert('文件大小不能超过500KB');
        event.target.value = '';
        return;
      }
      
      // 保存文件信息
      selectedFile.value = file;
      
      // 模拟上传过程
      setTimeout(() => {
        // 上传完成后跳转到AI聊天界面
        router.push({
          path: '/aichat',
          query: { 
            filename: file.name,
            filesize: file.size,
            filetype: file.type,
            uploadTime: new Date().toISOString()
          }
        });
      }, 500); // 模拟短暂的上传时间
      
      // 重置文件输入
      event.target.value = '';
    };
    
    return {
      navigateTo,
      showMultiUploadModal,
      singleFileInput,
      triggerSingleFileInput,
      handleSingleFileUpload
    };
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stats Cards */
.stats-cards {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.stat-card {
  background-color: #F5F2EB;
  border-radius: 10px;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 150px;
}

.stat-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 48px;
  font-weight: bold;
  color: #303133;
}

.help-card {
  justify-content: space-around;
}

.help-btn {
  background-color: white;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  padding: 10px 30px;
  font-size: 16px;
  cursor: pointer;
}

/* Upload Section */
.upload-section {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.upload-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}

.upload-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.toggle-icon {
  font-size: 12px;
}

.recent-file {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: #F5F7FA;
  border-radius: 5px;
  margin-bottom: 20px;
}

.recent-file span {
  font-weight: 500;
}

.recent-file a {
  color: #409EFF;
  text-decoration: none;
  flex: 1;
}

.recent-file a:hover {
  text-decoration: underline;
}

.view-btn {
  background-color: white;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  padding: 5px 15px;
  cursor: pointer;
}

.upload-boxes {
  display: flex;
  gap: 30px;
}

.upload-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-box-content {
  width: 100%;
  padding: 40px 20px;
  border: 2px dashed #DCDFE6;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-box-content:hover {
  border-color: #409EFF;
}

.upload-icon {
  font-size: 40px;
  color: #C0C4CC;
}

.upload-box-content p {
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #606266;
}

.upload-hint {
  font-size: 12px;
  color: #909399;
}
</style> 